<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Pixastic</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="pixastic.js"></script>
    <script src="pixastic.effects.js"></script>
    <script src="pixastic.worker.js"></script>
    <script>
        window.onload = function() {
             
            function doTest(test) {
                var img = document.getElementById("original-image"),
                    canvas = document.getElementById("output-canvas"),
                    ctx = canvas.getContext("2d"),
                    progress = document.getElementById("progress-inner"),
                    P;

                canvas.style.display = "none";
                canvas.width = img.width;
                canvas.height = img.height;
                canvas.title = test.effect;
                ctx.drawImage(img, 0, 0);

                P = new Pixastic(ctx);
                P[test.effect](test.options).done(function() {
                    canvas.style.display = "block";
                }, function(p) {
                    progress.style.height = (p * 100) + "%";
                });
            }
            
            var tests = [
                {
                    effect : "posterize",
                    options : {
                        levels : 5
                    }
                }, {
                    effect : "solarize"
                }, {
                    effect : "colorfilter",
                    options : {
                        r : 0,
                        g : 194 / 255,
                        b : 177 / 255,
                        luminosity : 0
                    }
                }, {
                    effect : "findedges"
                }, {
                    effect : "emboss",
                    options : {
                        amount : 0.5,
                        angle : 135 / 180 * Math.PI
                    }
                }, {
                    effect : "edgeenhance3x3"
                }, {
                    effect : "edgeenhance5x5"
                }, {
                    effect : "sharpen3x3",
                    options : {
                        strength : 0.5
                    }
                }, {
                    effect : "sharpen5x5",
                    options : {
                        strength : 0.1
                    }
                }, {
                    effect : "soften3x3"
                }, {
                    effect : "soften5x5"
                }, {
                    effect : "laplace3x3"
                }, {
                    effect : "laplace5x5"
                }, {
                    effect : "crossedges",
                    options : {
                        strength : 0.5
                    }
                }, {
                    effect : "coloradjust",
                    options : {
                        r : 0,
                        g : 0.3,
                        b : 0
                    }
                }, {
                    effect : "blur",
                    options : {
                        kernelSize : 5
                    }
                },{
                    effect : "glow",
                    options : {
                        kernelSize : 5,
                        amount : 1.0
                    }
                }, {
                    effect : "hsl",
                    options : {
                        hue : -0.8,
                        saturation : 0.5,
                        lightness : -0.3
                    }
                },{
                    effect : "fliph"
                },{
                    effect : "flipv"
                },{
                    effect : "desaturate"
                },{
                    effect : "brightness",
                    options : {
                        brightness : -1.00,
                        contrast : -0.1
                    }
                },{
                    effect : "sepia", 
                },{
                    effect : "invert",
                },{
                    effect : "noise",
                    options : {
                        amount : 0.5,
                        strength : 0.5,
                        mono : true
                    }
                },{
                    effect : "removenoise"
                },{
                    effect : "lighten",
                    options : {
                        amount : 0.5
                    }
                },
                {
                    effect : 'mosaic',
                    options : {
                        blockSize : 8
                    }
                },
                {
                    effect : 'equalize',
                    options : {
                    }
                }
            ];
            
            var ul = document.getElementById("testlist"),
                li;
            
            for (var i=0;i<tests.length;i++) {
                li = document.createElement("li");
                li.innerHTML = tests[i].effect;
                li.setAttribute("data-test", i);
                ul.appendChild(li);
            }
            
            ul.addEventListener("click", function(e) {
                var target = e.target || e.srcElement,
                    test;
                if (target.tagName == "LI") {
                    test = tests[target.getAttribute("data-test")];
                    doTest(test);
                }
            }, false);
            
        }
    </script>
</head>
<body>

    <ul id="testlist"></ul>
    <img src="sample-images/monalisa.jpg" id="original-image">
    <div id="progress"><div id="progress-inner"></div></div>
    <canvas id="output-canvas"></canvas>


</body>
</html>